<script setup>
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { NButton } from 'naive-ui'
import serachInput from '@/components/searchInput/serachInput.vue'
import addDevice from './components/addDevice.vue'
import tipButton from '@/components/customButton/tipButton.vue'
import customUploadPopup from '@/components/customUploadPopup/customUploadPopup.vue'

const { t } = useI18n()
const router = useRouter()

const data = Array.from({ length: 46 }).map((_, index) => ({
  name: `Edward King ${index}`,
  age: 32,
  address: `London, Park Lane no. ${index}`
}))

const goDetail = (row) => {
  router.push({
    path: '/home/device/deviceDetail'
  })
}

const columns = computed(() => {
  return [
    {
      type: 'selection',
      disabled(row) {
        return row.name === 'Edward King 3'
      },
      fixed: 'left'
    },

    {
      title: 'Name',
      key: 'name',
      fixed: 'left'
    },
    {
      title: 'IP',
      key: 'IP'
    },
    {
      title: 'MAC',
      key: 'MAC'
    },
    {
      title: t('system.version'),
      key: 'version'
    },
    {
      title: t('system.model'),
      key: 'model'
    },
    {
      title: t('system.belong'),
      key: 'belong'
    },
    {
      title: t('system.date'),
      key: 'date'
    },
    {
      title: t('system.state'),
      key: 'state'
    },
    {
      title: t('system.operation'),
      key: 'state',
      fixed: 'right',
      render: (row) => {
        return [
          h(
            NButton,
            {
              quaternary: true,
              type: 'primary',
              onClick: () => sendMail(row),
              style: {
                marginRight: '2px'
              }
            },
            { default: () => t('system.upgrade') }
          ),
          h(
            tipButton,
            {
              btnProps: {
                quaternary: true,
                type: 'Error'
              },
              btnText: t('system.restart'),
              text: t('system.restartTip'),
              onComfirmHandle: () => {
                console.log('dinjil')
              },
              style: {
                marginRight: '2px'
              }
            },
            {}
          ),
          // h(
          //   NButton,
          //   {
          //     size: 'small',
          //     quaternary: true,
          //     onClick: () => sendMail(row),
          //     style: {
          //       marginRight: '10px'
          //     }
          //   },
          //   { default: () => t('system.modify') }
          // ),
          h(
            addDevice,
            {
              btnText: t('system.modify'),
              btnProps: { quaternary: true },
              title: t('system.modify'),
              style: {
                marginRight: '2px'
              }
            },
            { default: () => t('system.modify') }
          ),
          h(
            NButton,
            {
              quaternary: true,
              onClick: () => goDetail(row)
            },
            { default: () => t('system.detail') }
          )
        ]
      }
    }
  ]
})

const checkedRowKeysRef = ref([])
const handleCheck = (rowKeys) => {
  checkedRowKeysRef.value = rowKeys
}

const valueChange = (keyword) => {
  console.log(keyword)
}

const deleteHandle = () => {
  console.log('点击了删除')
}
</script>

<template>
  <div class="p-6">
    <div class="flex justify-between items-center mb-4 flex-wrap">
      <div class="flex items-center mb-2 md:mb-0">
        <addDevice
          :title="t('device.addDevice')"
          :btn-text="t('system.add')"
          :btnProps="{ type: 'primary' }"
        />
        <!-- <n-button type="error" class="mx-2">{{ t('system.delete') }}</n-button> -->
        <tipButton :btnProps="{ type: 'error' }" className="mx-4" @comfirmHandle="deleteHandle" />
        <serachInput @valueChange="valueChange" />
      </div>
      <div>
        <!-- <n-button class="mr-2">{{ t('system.import') }}</n-button> -->
        <customUploadPopup :btnText="t('system.import')"></customUploadPopup>
        <n-button class="ml-2">{{ t('system.export') }}</n-button>
      </div>
    </div>
    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="{ pageSize: 5 }"
      :row-key="(row) => row.address"
      @update:checked-row-keys="handleCheck"
      :scroll-x="1200"
    />
  </div>
</template>

<style scoped></style>
